<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-10-24 09:16:55
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-10-30 09:41:40
 * @FilePath: \v9\src\views\global\delivery\components\SvgIconCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    style="display: flex; padding: 4px; border-radius: 5px"
    :class="show ? '' : 'backDiv'"
  >
    <template v-if="prompt"
      ><el-tooltip
        class="item"
        effect="dark"
        :content="prompt"
        placement="bottom"
      >
        <svg-icon
          :id="IconClass"
          class="icon"
          :icon-class="show ? IconClass : mouseIconClass"
          @click="changeSvg"
        />
      </el-tooltip>
    </template>
    <template v-else>
      <svg-icon
        :id="IconClass"
        class="icon"
        :icon-class="show ? IconClass : mouseIconClass"
      />
    </template>
  </div>
</template>
<script>
export default {
  props: {
    // 初始svg图片路径
    IconClass: {
      type: String,
      default: "",
    },
    // 鼠标移入时的图片路径
    mouseIconClass: {
      type: String,
      default: "",
    },
    // 选中的图片数组
    list: {
      type: Array,
      default: () => [],
    },
    // 提示文字
    prompt: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      show: true,
    };
  },
  watch: {
    list: {
      handler(val) {
      },
      immediate: true,
    },
  },
  mounted() {
    let icon = document.getElementById(this.IconClass);
    icon.addEventListener("mousemove", (e) => {
      this.show = false;
    });
    icon.addEventListener("mouseout", (e) => {
      this.show = true;
    });
  },
  methods: {
    changeSvg() {
      this.$emit('iconClick', this.IconClass);
    },
  },
  destroyed() {
    // this.show = false;
  },
};
</script>

<style lang="scss" scoped>
.icon {
  width: 14px;
  height: 14px;

  &:hover {
    cursor: pointer;
  }
}
.backDiv {
  background: #f1f1f1;
}
</style>